<template>
  <div class="details">
    <el-card>
      <el-tabs v-model="activeName">
        <el-tab-pane label="登录账户设置" name="loginInfo">
          <el-form
            ref="baseForm"
            :model="userInfo"
            :rules="rules"
            label-width="80px"
            style="width:350px;margin:50px auto;"
          >
            <el-form-item prop="username" label="姓名：">
              <el-input v-model="userInfo.username"></el-input>
            </el-form-item>
            <el-form-item prop="password" label="密码：">
              <el-input type="password" v-model="userInfo.password"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="saveProfile">更新</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="个人详情" name="userInfo">
          <user-info />
        </el-tab-pane>
        <el-tab-pane label="岗位信息" name="jobInfo">
          <job-info />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import userInfo from "./componets/user-info.vue";
import jobInfo from "./componets/job-info.vue";
import { userInfoPhoto } from "@/api/user";
import { saveProfile } from "@/api/employees";

export default {
  name: "detail",
  data() {
    return {
      activeName: "loginInfo",
      userInfo: {},
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
      }
    };
  },
  //   注册组件
  components: {
    userInfo,
    jobInfo
  },
  created() {
    this.getBaseProfile();
  },
  methods: {
    //   获取用户信息
    async getBaseProfile() {
      let res = await userInfoPhoto(this.$route.query.id);
      this.userInfo = res.data;
      //   console.log(res);
    },
    saveProfile() {
      // 登录账户设置表单验证
      this.$refs.baseForm.validate(async v => {
        if (v) {
          let res = await saveProfile(this.userInfo);
          console.log(res);
          this.$message.success("修改信息成功");
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.details {
  padding: 20px;
}
</style>
